<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ctx {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="ctx" width="600" height="600"></canvas>
</body>
<script>
    //获取dom
    let ctxDOM = document.querySelector('#ctx')
        //初始化为canvas对象
    let context = ctxDOM.getContext('2d')

    //绘制圆  Math.PI   360度 =2*Maht.PI/360 弧度   1度=
    // context.arc(x, y,圆半径, 起始弧度, 结束弧度, 顺时针/逆时针);

    //开始绘制
    context.beginPath();
    context.arc(300, 300, 150, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    context.stroke();
    context.closePath();
    context.fillStyle = '#dba18d';

    context.fillText('大宝贝', 280, 200);
context.font("20px")
context.font = "28px serif";

   context.fill();

    // context.beginPath();
    // context.fillStyle = '#9ca947';

    // //笔
    // context.arc(380, 250, 30, Math.PI / 180 * 0, Math.PI / 180 * 1, true);
    // context.fill();

    // context.stroke();
    // context.closePath();


    // context.beginPath();
    // context.fillStyle = '#073ce6';
    // context.arc(230, 250, 30, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    // context.fill();
    // context.stroke();
    // context.closePath();

    
    // context.beginPath();
    // context.arc(300, 350, 30, Math.PI / 180 * 180, Math.PI / 180 * 1, true);
    // context.stroke();
    // context.closePath();






    
    // context.beginPath();
    // context.fillStyle = '#1e1e1e';
    // context.arc(230, 250, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    // context.fill();
    // context.stroke();
    // context.closePath();

    
    // context.beginPath();
    // context.fillStyle = '#red';
    // context.arc(300, 290, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    // context.fill();
    // context.stroke();
    // context.closePath();


    // context.beginPath();
    // context.fillStyle = '#e7e7e7';
    // context.arc(380, 250, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
    // context.fill();
    // context.stroke();
    // context.closePath();








    // context.beginPath();
    // //设置填充色
    // context.fillStyle = 'red';


</script>

</html>